<template>
  <view class="wechat-container">
    <!-- 顶部标题栏 - 显示未读总数 -->
    <view class="title-bar">
		<view style="flex: 4;"></view>
      <view style="flex: 5;"><text class="title">微信<text class="unread-count">(7)</text></text></view>
	  <!-- 搜索框 -->
	  <view style="flex: 1;">🔍</view>
    </view>
	<view style="height: 1200rpx; background-color: #e8e8e8;">
		<view v-if="selectButton[0]">
			<!-- 显示聊天首页 -->
			<scroll-view class="chat-list" scroll-y>
			  <!-- 每个聊天项 -->
			  <view class="chat-item" v-for="(chat, index) in chats" :key="index">
			    <view class="avatar-container">
			      <image :src="chat.avatar" class="avatar" />
			      <view v-if="chat.unread > 0" class="unread-badge">{{ chat.unread }}</view>
			    </view>
			
			    <view class="chat-info">
			      <view class="top-line">
			        <text class="name">{{ chat.name }}</text>
			        <text class="time">{{ formatTime(chat.time) }}</text>
			      </view>
			      <view class="preview-line">
			        <text class="preview">{{ chat.preview }}</text>
			      </view>
			    </view>
			  </view>
			</scroll-view>
		</view>
		<view v-if="selectButton[1]">
			<!-- 通讯录界面 -->
			<view class="contact">
				<template v-for="(item, index) in contacts">
					<!-- 每个单独的好友 -->
					<view class="contactItem">
						<!-- 头像 -->
						<view class="contactItemHeadImage"></view>
						<!-- 内容 -->
						<view class="contactItemContext">{{item.name}}</view>
					</view>
				</template>
			</view>
		</view>
		<view v-if="selectButton[2]">
			<!-- 发现界面 -->
			<view class="discover">
				<template v-for="(item,index) in discovers">
					<view class="discoverItem">
						<!-- 小功能的具体图标 -->
						<view class="discoverIcon"></view>
						<!-- 小功能的具体名称 -->
						<view class="discoverName">{{item.name}}</view>
					</view>
				</template>
			</view>
		</view>
		<view v-if="selectButton[3]">
			<!-- 我的界面 -->
			<view class="wode">
				<!-- 我的主要信息 -->
				<view class="wodeInfo">
					<!-- 头像 -->
					<view class="wodeInfoHead"></view>
					<!-- 详细信息 -->
					<view class="wodeDetailInfo">
						<!-- 昵称 -->
						<view class="wodeDetailInfoName">zhangsan</view>
						<!-- 用户Id -->
						<view class="wodeDetailInfoId">userId: 123456</view>
						<!-- 当前的状态,以及设置状态 -->
						<view class="wodeDetailInfoStatus">在线</view>
					</view>
				</view>
				
				<view class="wodeItem">
					<!-- 小功能的具体图标 -->
					<view class="wodeIcon"></view>
					<!-- 小功能的具体名称 -->
					<view class="wodeName">服务</view>
				</view>
			</view>
		</view>
	</view>
    

    <!-- 底部导航栏 -->
    <view class="tab-bar" >
      <view class="tab-item" @click="changeButtonByIndex(0)" >
        <view class="tab-icon-wrapper" >
          <view class="tab-icon chat-icon" :class="selectButton[0] ? 'redbg' : ''"></view>
          <view v-if="totalUnread > 0" class="tab-unread" >{{ totalUnread }}</view>
        </view>
        <text class="tab-text">消息</text>
      </view>
      <view class="tab-item" @click="changeButtonByIndex(1)">
        <view class="tab-icon-wrapper">
          <view class="tab-icon contact-icon" :class="selectButton[1] ? 'redbg' : ''"></view>
        </view>
        <text class="tab-text">通讯录</text>
      </view>
      <view class="tab-item" @click="changeButtonByIndex(2)">
        <view class="tab-icon-wrapper">
          <view class="tab-icon discover-icon" :class="selectButton[2] ? 'redbg' : ''"></view>
        </view>
        <text class="tab-text">发现</text>
      </view>
      <view class="tab-item" @click="changeButtonByIndex(3)">
        <view class="tab-icon-wrapper">
          <view class="tab-icon me-icon" :class="selectButton[3] ? 'redbg' : ''"></view>
        </view>
        <text class="tab-text">我</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 聊天数据 (根据第二张图精确复制)

// 四个底部框的选中样式
let selectButton = ref([true,false,false,false])
// 模拟"发现"信息
const discovers = ref([
	{
		image: "/image/image",
		name: '朋友圈'
	},{
		image: "/image/image",
		name: '附近'
	},{
		image: "/image/image",
		name: '扫一扫'
	},{
		image: "/image/image",
		name: '添加好友'
	}
])

// 模拟通讯录
const contacts = ref([
	{
		headImages: '/static/avatar1.png',
		name: '张三'
	},
	{
		headImages: '/static/avatar1.png',
		name: '李四'
	},
	{
		headImages: '/static/avatar1.png',
		name: '王五'
	},
])


// 模拟消息
const chats = ref([
  {
    avatar: '/static/avatar1.png', // 尹和英头像
    name: '² 尹和英',
    preview: '快给我介绍对象，不介绍我就吐血··',
    time: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
    unread: 2
  },
  {
    avatar: '/static/avatar2.png', // 娃他妈头像
    name: '娃他妈',
    preview: '我回家了，没在老家哈，你要回家···',
    time: new Date(Date.now() - 45 * 60 * 1000), // 45分钟前
    unread: 0
  },
  {
    avatar: '/static/avatar3.png', // 二狗头像
    name: '二狗',
    preview: '吃饭去了',
    time: new Date(Date.now() - 60 * 60 * 1000), // 1小时前
    unread: 0
  },
  {
    avatar: '/static/avatar4.png', // 小白头像
    name: '小白',
    preview: '二狗还在吃饭，去不',
    time: new Date(Date.now() - 90 * 60 * 1000), // 1.5小时前
    unread: 0
  },
  {
    avatar: '/static/avatar5.png', // 弟弟头像
    name: '弟弟',
    preview: '咱妈要揍我双人会和双打，就因为···',
    time: new Date(Date.now() - 120 * 60 * 1000), // 2小时前
    unread: 5
  },
  {
    avatar: '/static/avatar6.png', // 米红沅头像
    name: '米红沅',
    preview: '嘻嘻',
    time: new Date(Date.now() - 150 * 60 * 1000), // 2.5小时前
    unread: 0
  },
  {
    avatar: '/static/avatar7.png', // 九吾头像
    name: '九吾',
    preview: 'Ok',
    time: new Date(Date.now() - 180 * 60 * 1000), // 3小时前
    unread: 0
  },
  {
    avatar: '/static/avatar7.png', // 九吾头像
    name: '九吾',
    preview: 'Ok',
    time: new Date(Date.now() - 180 * 60 * 1000), // 3小时前
    unread: 0
  },
  {
    avatar: '/static/avatar7.png', // 九吾头像
    name: '九吾',
    preview: 'Ok',
    time: new Date(Date.now() - 180 * 60 * 1000), // 3小时前
    unread: 0
  },
  {
    avatar: '/static/avatar7.png', // 九吾头像
    name: '九吾',
    preview: 'Ok',
    time: new Date(Date.now() - 180 * 60 * 1000), // 3小时前
    unread: 0
  }
]);

onLoad((options) =>{
	console.log("初始化",options)
})

// 计算总未读数（精确匹配第二张图）
const totalUnread = computed(() => {
  return chats.value.reduce((total, chat) => total + chat.unread, 0);
});

// 时间格式化（符合第二张图显示效果）
const formatTime = (date) => {
  const now = new Date();
  const msgDate = new Date(date);
  const diffHours = Math.floor((now - msgDate) / (1000 * 60 * 60));
  
  // 今天的消息显示具体时间（如 14:20）
  if (diffHours < 24) {
    return `${msgDate.getHours().toString().padStart(2, '0')}:${msgDate.getMinutes().toString().padStart(2, '0')}`;
  } 
  // 昨天的消息显示"昨天"
  else if (diffHours < 48) {
    return '昨天';
  }
  // 更早的消息显示日期（如 8/4）
  else {
    return `${msgDate.getMonth() + 1}/${msgDate.getDate()}`;
  }
};

function changeButtonByIndex(index){
	selectButton.value.fill(false);
	selectButton.value[index] = true;
}
</script>

<style scoped>
/* 整体容器 */
.wechat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 顶部标题栏 */
.title-bar {
  height: 44px;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #d9d9d9;
  position: sticky;
  top: 0;
  z-index: 10;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.unread-count {
  color: #8c8c8c;
  font-size: 16px;
}

/* 聊天列表区域 */
.chat-list {
  flex: 1;
  overflow-y: auto;
}

/* 聊天项样式（匹配第二张图） */
.chat-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  position: relative;
  margin-right: 12px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 4px;
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 3px;
}

/* 聊天信息区域 */
.chat-info {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.top-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.time {
  font-size: 12px;
  color: #999;
}

.preview-line {
  display: flex;
  width: 100%;
}

.preview {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

/* 底部导航栏（精确匹配第二张图） */
.tab-bar {
  display: flex;
  justify-content: space-around;
  height: 56px;
  background-color: white;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.tab-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.tab-unread {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 3px;
}

/* 图标占位样式 - 供您后期替换 */
.tab-icon {
  width: 22px;
  height: 22px;
  background-color: #8c8c8c;
  border-radius: 4px;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.redbg{
	background-color: red;
}
.contact{
	width: 95%;
	margin:auto;
	height: 500px;
	
}

.contactItem{
	background-color: #FFF;
	margin-top: 10rpx;
	height: 120rpx;	
	border-bottom: 1px black solid;
	/* background-color: #333; */
	display: flex;
	
}
.contactItemHeadImage{
	flex: 1;
	background-color: red;
	margin-bottom: 2px;
}
.contactItemContext{
	flex: 4;
	padding-left: 10px;
	
}
.discover{
	width: 93%;
	margin: auto;
}
.discoverItem{
	height: 90rpx;
	margin-top: 20rpx;
	background: #FFF;
	display: flex;
}
.discoverIcon{
	background-color: red;
	/* margin-left: 10rpx; */
	flex: 1;
}
.discoverName{
	flex: 5;
	padding-left: 10rpx;
	padding-top: 15rpx;
}

.wode{
	width: 93%;
	margin: auto;
}

.wodeInfo{
	height: 200rpx;
	background-color: #FFF;
	margin-bottom: 20rpx;
	display: flex;
	padding-top: 10rpx;
	padding-left: 10rpx;
}

.wodeInfoHead{
	flex: 2;
	height: 120rpx;
	background-color: red;
}
.wodeDetailInfo{
	flex: 8;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}
.wodeDetailInfoId{
	flex: 3;
}
.wodeDetailInfoName{
	flex: 4;
	font-size: 50rpx;
}
.wodeDetailInfoStatus{
	flex: 3;
}

.wodeItem{
	height: 100rpx;
	display: flex;
	background-color: #FFF;
}
.wodeIcon{
	background-color: red;
	flex: 1;
}
.wodeName{
	flex: 5;
	padding-left: 10rpx;
	padding-top: 15rpx;
}


</style>